<template>
  <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange" >
    全选
  </el-checkbox>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="item in cities" :key="item" :label="item" :value="item">
      {{ item.roleName }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const assignRoles = defineModel('assignRoles')
const roleList = defineModel('roleList')
const emit = defineEmits(['chekedallRole'])

const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref(assignRoles.value)
const cities = ref<any>(roleList.value)

const handleCheckAllChange = (val: boolean) => {
  checkedCities.value = val ? cities.value : []
  isIndeterminate.value = false
  emit('chekedallRole',checkedCities.value)
}
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.value.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.value.length
  emit('chekedallRole',checkedCities.value)
}
</script>
